@dxos/react-ui-editor 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

package/dist/lib/browser/index.mjs

@@ -40,7 +40,7 @@ import { tags as tags2 } from "@lezer/highlight";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 
 // packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
-import React, { useCallback } from "react";
+import React3, { memo, useCallback } from "react";
 import { ElevationProvider } from "@dxos/react-ui";
 import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from "@dxos/react-ui-menu";
 import { textBlockWidth } from "@dxos/react-ui-theme";
@@ -52,692 +52,110 @@ import { createMenuAction, createMenuItemGroup } from "@dxos/react-ui-menu";
 var useEditorToolbarState = (initialState = {}) => {
   return useMemo(() => live(initialState), []);
 };
-var createEditorAction = (payload, icon, label = [
-  `${payload.type} label`,
-  {
-    ns: translationKey
-  }
-], id = payload.type) => createMenuAction(id, {
-  icon,
-  label,
-  ...payload
-});
+var createEditorAction = (id, invoke, properties) => {
+  const { label = [
+    `${id} label`,
+    {
+      ns: translationKey
+    }
+  ], ...rest } = properties;
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest
+  });
+};
 var createEditorActionGroup = (id, props, icon) => createMenuItemGroup(id, {
   icon,
   iconOnly: true,
   ...props
 });
-var editorToolbarSearch = createEditorAction({
-  type: "search"
-}, "ph--magnifying-glass--regular");
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/blocks.ts
-var createBlockGroupAction = (value) => createEditorActionGroup("block", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createBlockActions = (value, blankLine) => Object.entries({
-  blockquote: "ph--quotes--regular",
-  codeblock: "ph--code-block--regular",
-  table: "ph--table--regular"
-}).map(([type, icon]) => {
-  return createEditorAction({
-    type,
-    checked: type === value,
-    ...type === "table" && {
-      disabled: !!blankLine
-    }
-  }, icon);
-});
-var createBlocks = (state) => {
-  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
-  const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, state.blankLine);
-  return {
-    nodes: [
-      blockGroupAction,
-      ...blockActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "block"
-      },
-      ...blockActions.map(({ id }) => ({
-        source: blockGroupAction.id,
-        target: id
-      }))
-    ]
-  };
-};
+// packages/ui/react-ui-editor/src/extensions/annotations.ts
+import { StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+import { isNotFalsy } from "@dxos/util";
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/comment.ts
-var commentLabel = (comment, selection) => comment ? "selection overlaps existing comment label" : selection === false ? "select text to comment label" : "comment label";
-var createCommentAction = (label) => createEditorAction({
-  type: "comment",
-  testId: "editor.toolbar.comment"
-}, "ph--chat-text--regular", label);
-var createComment = (state) => ({
-  nodes: [
-    createCommentAction([
-      commentLabel(state.comment, state.selection),
-      {
-        ns: translationKey
-      }
-    ])
-  ],
-  edges: [
-    {
-      source: "root",
-      target: "comment"
-    }
-  ]
+// packages/ui/react-ui-editor/src/util/facet.ts
+import { Facet } from "@codemirror/state";
+var singleValueFacet = (defaultValue) => Facet.define({
+  // Called immediately.
+  combine: (providers) => {
+    return providers[0] ?? defaultValue;
+  }
 });
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
-var formats = {
-  strong: "ph--text-b--regular",
-  emphasis: "ph--text-italic--regular",
-  strikethrough: "ph--text-strikethrough--regular",
-  code: "ph--code--regular",
-  link: "ph--link--regular"
+// packages/ui/react-ui-editor/src/util/cursor.ts
+var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
+var defaultCursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor)
 };
-var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
-  variant: "toggleGroup",
-  selectCardinality: "multiple",
-  value: Object.keys(formats).filter((key) => !!formatting[key])
-});
-var createFormattingActions = (formatting) => Object.entries(formats).map(([type, icon]) => createEditorAction({
-  type,
-  checked: !!formatting[type]
-}, icon));
-var createFormatting = (state) => {
-  const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state);
-  return {
-    nodes: [
-      formattingGroupAction,
-      ...formattingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "formatting"
-      },
-      ...formattingActions.map(({ id }) => ({
-        source: formattingGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+var Cursor = class _Cursor {
+  static {
+    this.converter = singleValueFacet(defaultCursorConverter);
+  }
+  static {
+    this.getCursorFromRange = (state, range) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const from = cursorConverter2.toCursor(range.from);
+      const to = cursorConverter2.toCursor(range.to, -1);
+      return [
+        from,
+        to
+      ].join(":");
+    };
+  }
+  static {
+    this.getRangeFromCursor = (state, cursor) => {
+      const cursorConverter2 = state.facet(_Cursor.converter);
+      const parts = cursor.split(":");
+      const from = cursorConverter2.fromCursor(parts[0]);
+      const to = cursorConverter2.fromCursor(parts[1]);
+      return from !== void 0 && to !== void 0 ? {
+        from,
+        to
+      } : void 0;
+    };
+  }
 };
 
-// packages/ui/react-ui-editor/src/components/EditorToolbar/headings.ts
-var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--text-h--regular");
-var createHeadingActions = (value) => Object.entries({
-  "0": "ph--paragraph--regular",
-  "1": "ph--text-h-one--regular",
-  "2": "ph--text-h-two--regular",
-  "3": "ph--text-h-three--regular",
-  "4": "ph--text-h-four--regular",
-  "5": "ph--text-h-five--regular",
-  "6": "ph--text-h-six--regular"
-}).map(([levelStr, icon]) => {
-  const level = parseInt(levelStr);
-  return createEditorAction({
-    type: "heading",
-    data: level,
-    checked: value === levelStr
-  }, icon, [
-    "heading level label",
-    {
-      count: level,
-      ns: translationKey
+// packages/ui/react-ui-editor/src/util/debug.ts
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
+var wrapWithCatch = (fn) => {
+  return (...args) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 15,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
     }
-  ], `heading--${levelStr}`);
-});
-var computeHeadingValue = (state) => {
-  const blockType = state ? state.blockType : "paragraph";
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === "paragraph" || !blockType ? "0" : "";
-};
-var createHeadings = (state) => {
-  const headingValue = computeHeadingValue(state);
-  const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(headingValue);
-  return {
-    nodes: [
-      headingGroupAction,
-      ...headingActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "heading"
-      },
-      ...headingActions.map(({ id }) => ({
-        source: headingGroupAction.id,
-        target: id
-      }))
-    ]
   };
 };
-
-// packages/ui/react-ui-editor/src/components/EditorToolbar/lists.ts
-var listStyles = {
-  bullet: "ph--list-bullets--regular",
-  ordered: "ph--list-numbers--regular",
-  task: "ph--list-checks--regular"
+var callbackWrapper = (fn) => (...args) => {
+  try {
+    return fn(...args);
+  } catch (err) {
+    log.catch(err, void 0, {
+      F: __dxlog_file,
+      L: 29,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
 };
-var createListGroupAction = (value) => createEditorActionGroup("list", {
-  variant: "toggleGroup",
-  selectCardinality: "single",
-  value
-});
-var createListActions = (value) => Object.entries(listStyles).map(([listStyle, icon]) => createEditorAction({
-  type: `list-${listStyle}`,
-  checked: value === listStyle
-}, icon));
-var createLists = (state) => {
-  const value = state.listStyle ?? "";
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value);
-  return {
-    nodes: [
-      listGroupAction,
-      ...listActionsMap
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "list"
-      },
-      ...listActionsMap.map(({ id }) => ({
-        source: listGroupAction.id,
-        target: id
-      }))
-    ]
-  };
+var debugDispatcher = (trs, view) => {
+  logChanges(trs);
+  view.update(trs);
 };
-
-// packages/ui/react-ui-editor/src/components/EditorToolbar/view-mode.ts
-var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
-  variant: "dropdownMenu",
-  applyActive: true,
-  selectCardinality: "single",
-  value
-}, "ph--eye--regular");
-var createViewModeActions = (value) => Object.entries({
-  preview: "ph--eye--regular",
-  source: "ph--pencil-simple--regular",
-  readonly: "ph--pencil-slash--regular"
-}).map(([viewMode, icon]) => {
-  return createEditorAction({
-    type: "view-mode",
-    data: viewMode,
-    checked: viewMode === value
-  }, icon, [
-    `${viewMode} mode label`,
-    {
-      ns: translationKey
-    }
-  ], `view-mode--${viewMode}`);
-});
-var createViewMode = (state) => {
-  const value = state.viewMode ?? "source";
-  const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
-  return {
-    nodes: [
-      viewModeGroupAction,
-      ...viewModeActions
-    ],
-    edges: [
-      {
-        source: "root",
-        target: "viewMode"
-      },
-      ...viewModeActions.map(({ id }) => ({
-        source: viewModeGroupAction.id,
-        target: id
-      }))
-    ]
-  };
-};
-
-// packages/ui/react-ui-editor/src/defaults.ts
-import { EditorView } from "@codemirror/view";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/styles/markdown.ts
-import { mx } from "@dxos/react-ui-theme";
-var headings = {
-  1: "text-4xl",
-  2: "text-3xl",
-  3: "text-2xl",
-  4: "text-xl",
-  5: "text-lg",
-  6: ""
-};
-var theme = {
-  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
-  codeMark: "font-mono text-primary-500",
-  mark: "opacity-50",
-  heading: (level) => {
-    return mx(headings[level], "dark:text-primary-400");
-  }
-};
-
-// packages/ui/react-ui-editor/src/styles/tokens.ts
-import get from "lodash.get";
-import { tokens } from "@dxos/react-ui-theme";
-var getToken = (path, defaultValue) => {
-  const value = get(tokens, path, defaultValue);
-  return value?.toString() ?? "";
-};
-var fontBody = getToken("fontFamily.body");
-var fontMono = getToken("fontFamily.mono");
-
-// packages/ui/react-ui-editor/src/styles/theme.ts
-var defaultTheme = {
-  "&": {},
-  "&.cm-focused": {
-    outline: "none"
-  },
-  /**
-  * Scroller
-  */
-  ".cm-scroller": {
-    overflowY: "auto"
-  },
-  /**
-  * Content
-  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
-  */
-  ".cm-content": {
-    padding: "unset",
-    fontFamily: fontBody,
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: "16px",
-    lineHeight: 1.5,
-    color: "unset"
-  },
-  /**
-  * Gutters
-  * NOTE: Gutters should have the same top margin as the content.
-  */
-  ".cm-gutters": {
-    borderRight: "none",
-    background: "transparent"
-  },
-  ".cm-gutter": {},
-  ".cm-gutter.cm-lineNumbers": {
-    paddingRight: "4px",
-    borderRight: "1px solid var(--dx-separator)"
-  },
-  ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-    minWidth: "40px",
-    alignContent: "center"
-  },
-  /**
-  * Height is set to match the corresponding line.
-  */
-  ".cm-gutterElement": {
-    alignItems: "center",
-    fontSize: "12px"
-  },
-  /**
-  * Line.
-  */
-  ".cm-line": {
-    paddingInline: 0
-  },
-  ".cm-activeLine": {
-    background: "var(--dx-cmActiveLine)"
-  },
-  /**
-  * Cursor (layer).
-  */
-  ".cm-cursor, .cm-dropCursor": {
-    borderLeft: "2px solid var(--dx-cmCursor)"
-  },
-  ".cm-placeholder": {
-    color: "var(--dx-subdued)"
-  },
-  /**
-  * Selection (layer).
-  */
-  ".cm-selectionBackground": {
-    background: "var(--dx-cmSelection)"
-  },
-  /**
-  * Search.
-  * NOTE: Matches comment.
-  */
-  ".cm-searchMatch": {
-    margin: "0 -3px",
-    padding: "3px",
-    borderRadius: "3px",
-    background: "var(--dx-cmHighlightSurface)",
-    color: "var(--dx-cmHighlight)"
-  },
-  ".cm-searchMatch-selected": {
-    textDecoration: "underline"
-  },
-  /**
-  * Link.
-  */
-  ".cm-link": {
-    textDecorationLine: "underline",
-    textDecorationThickness: "1px",
-    textDecorationColor: "var(--dx-separator)",
-    textUnderlineOffset: "2px",
-    borderRadius: ".125rem"
-  },
-  ".cm-link > span": {
-    color: "var(--dx-accentText)"
-  },
-  /**
-  * Tooltip.
-  */
-  ".cm-tooltip": {
-    background: "var(--dx-baseSurface)"
-  },
-  ".cm-tooltip-below": {},
-  /**
-  * Autocomplete.
-  * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-  */
-  ".cm-tooltip.cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
-    maxHeight: "20em"
-  },
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
-  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
-    paddingLeft: "4px !important",
-    borderBottom: "none !important",
-    color: "var(--dx-accentText)"
-  },
-  ".cm-tooltip.cm-completionInfo": {
-    width: "360px !important",
-    margin: "-10px 1px 0 1px",
-    padding: "8px !important",
-    borderColor: "var(--dx-separator)"
-  },
-  ".cm-completionIcon": {
-    display: "none"
-  },
-  ".cm-completionLabel": {
-    fontFamily: fontBody
-  },
-  ".cm-completionMatchedText": {
-    textDecoration: "none !important",
-    opacity: 0.5
-  },
-  /**
-  * Panels
-  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-  *
-  * Find/replace panel.
-  * <div class="cm-announced">...</div>
-  * <div class="cm-scroller">...</div>
-  * <div class="cm-panels cm-panels-bottom">
-  *   <div class="cm-search cm-panel">
-  *     <input class="cm-textfield" />
-  *     <button class="cm-button">...</button>
-  *     <label><input type="checkbox" />...</label>
-  *   </div>
-  * </div
-  */
-  // TODO(burdon): Implement custom panel (with icon buttons).
-  ".cm-panels": {},
-  ".cm-panel": {
-    fontFamily: fontBody,
-    backgroundColor: "var(--surface-bg)"
-  },
-  ".cm-panel input, .cm-panel button, .cm-panel label": {
-    color: "var(--dx-subdued)",
-    fontFamily: fontBody,
-    fontSize: "14px",
-    all: "unset",
-    margin: "3px !important",
-    padding: "2px 6px !important",
-    outline: "1px solid transparent"
-  },
-  ".cm-panel input, .cm-panel button": {
-    backgroundColor: "var(--dx-input)"
-  },
-  ".cm-panel input:focus, .cm-panel button:focus": {
-    outline: "1px solid var(--dx-accentFocusIndicator)"
-  },
-  ".cm-panel label": {
-    display: "inline-flex",
-    alignItems: "center",
-    cursor: "pointer"
-  },
-  ".cm-panel input.cm-textfield": {},
-  ".cm-panel input[type=checkbox]": {
-    width: "8px",
-    height: "8px",
-    marginRight: "6px !important",
-    padding: "2px !important",
-    color: "var(--dx-accentFocusIndicator)"
-  },
-  ".cm-panel button": {
-    "&:hover": {
-      backgroundColor: "var(--dx-accentSurfaceHover) !important"
-    },
-    "&:active": {
-      backgroundColor: "var(--dx-accentSurfaceHover)"
-    }
-  },
-  ".cm-panel.cm-search": {
-    padding: "4px",
-    borderTop: "1px solid var(--dx-separator)"
-  }
-};
-
-// packages/ui/react-ui-editor/src/defaults.ts
-var margin = "!mt-[1rem]";
-var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
-var editorContent = mx2(margin, editorWidth);
-var editorFullWidth = mx2(margin);
-var editorGutter = EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
-  ".cm-gutters": {
-    marginTop: "1rem",
-    paddingRight: "1rem"
-  }
-});
-var editorMonospace = EditorView.theme({
-  ".cm-content": {
-    fontFamily: fontMono
-  }
-});
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var stackItemContentEditorClassNames = (role) => mx2("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
-var stackItemContentToolbarClassNames = (role) => mx2("attention-surface is-full border-be !border-separator relative z-[1]", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
-
-// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
-var createToolbar = ({ state, customActions, ...features }) => {
-  const nodes = [];
-  const edges = [];
-  if (features.headings ?? true) {
-    const headings2 = createHeadings(state);
-    nodes.push(...headings2.nodes);
-    edges.push(...headings2.edges);
-  }
-  if (features.formatting ?? true) {
-    const formatting = createFormatting(state);
-    nodes.push(...formatting.nodes);
-    edges.push(...formatting.edges);
-  }
-  if (features.lists ?? true) {
-    const lists = createLists(state);
-    nodes.push(...lists.nodes);
-    edges.push(...lists.edges);
-  }
-  if (features.blocks ?? true) {
-    const blocks = createBlocks(state);
-    nodes.push(...blocks.nodes);
-    edges.push(...blocks.edges);
-  }
-  if (customActions) {
-    const custom = customActions();
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  const editorToolbarGap = createGapSeparator();
-  nodes.push(...editorToolbarGap.nodes);
-  edges.push(...editorToolbarGap.edges);
-  if (features.comment ?? true) {
-    const comment = createComment(state);
-    nodes.push(...comment.nodes);
-    edges.push(...comment.edges);
-  }
-  if (features.search ?? true) {
-    nodes.push(editorToolbarSearch);
-    edges.push({
-      source: "root",
-      target: editorToolbarSearch.id
-    });
-  }
-  if (features.viewMode ?? true) {
-    const viewMode = createViewMode(state);
-    nodes.push(...viewMode.nodes);
-    edges.push(...viewMode.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
-};
-var useEditorToolbarActionGraph = ({ onAction, ...props }) => {
-  const menuCreator = useCallback(() => createToolbar(props), [
-    props
-  ]);
-  const { resolveGroupItems } = useMenuActions(menuCreator);
-  return {
-    resolveGroupItems,
-    onAction
-  };
-};
-var EditorToolbar = ({ classNames, attendableId, role, ...props }) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: stackItemContentToolbarClassNames(role)
-  }, /* @__PURE__ */ React.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React.createElement(MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ React.createElement(ToolbarMenu, {
-    classNames: [
-      textBlockWidth,
-      "!bg-transparent",
-      classNames
-    ]
-  }))));
-};
-
-// packages/ui/react-ui-editor/src/extensions/annotations.ts
-import { StateField } from "@codemirror/state";
-import { Decoration, EditorView as EditorView2 } from "@codemirror/view";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-editor/src/util/facet.ts
-import { Facet } from "@codemirror/state";
-var singleValueFacet = (defaultValue) => Facet.define({
-  // Called immediately.
-  combine: (providers) => {
-    return providers[0] ?? defaultValue;
-  }
-});
-
-// packages/ui/react-ui-editor/src/util/cursor.ts
-var overlap = (a, b) => a.from <= b.to && a.to >= b.from;
-var defaultCursorConverter = {
-  toCursor: (position) => position.toString(),
-  fromCursor: (cursor) => parseInt(cursor)
-};
-var Cursor = class _Cursor {
-  static {
-    this.converter = singleValueFacet(defaultCursorConverter);
-  }
-  static {
-    this.getCursorFromRange = (state, range) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const from = cursorConverter2.toCursor(range.from);
-      const to = cursorConverter2.toCursor(range.to, -1);
-      return [
-        from,
-        to
-      ].join(":");
-    };
-  }
-  static {
-    this.getRangeFromCursor = (state, cursor) => {
-      const cursorConverter2 = state.facet(_Cursor.converter);
-      const parts = cursor.split(":");
-      const from = cursorConverter2.fromCursor(parts[0]);
-      const to = cursorConverter2.fromCursor(parts[1]);
-      return from !== void 0 && to !== void 0 ? {
-        from,
-        to
-      } : void 0;
-    };
-  }
-};
-
-// packages/ui/react-ui-editor/src/util/debug.ts
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util/debug.ts";
-var wrapWithCatch = (fn) => {
-  return (...args) => {
-    try {
-      return fn(...args);
-    } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 15,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-};
-var callbackWrapper = (fn) => (...args) => {
-  try {
-    return fn(...args);
-  } catch (err) {
-    log.catch(err, void 0, {
-      F: __dxlog_file,
-      L: 29,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-};
-var debugDispatcher = (trs, view) => {
-  logChanges(trs);
-  view.update(trs);
-};
-var logChanges = (trs) => {
-  const changes = trs.flatMap((tr) => {
-    if (tr.changes.empty) {
-      return void 0;
+var logChanges = (trs) => {
+  const changes = trs.flatMap((tr) => {
+    if (tr.changes.empty) {
+      return void 0;
     }
     const changes2 = [];
     tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => changes2.push(JSON.stringify({
@@ -789,7 +207,7 @@ var clientRectsFor = (dom) => {
 };
 
 // packages/ui/react-ui-editor/src/util/react.tsx
-import React2 from "react";
+import React from "react";
 import { createRoot } from "react-dom/client";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
 import { defaultTx } from "@dxos/react-ui-theme";
@@ -806,15 +224,15 @@ var createElement = (tag, options, children) => {
   return el;
 };
 var renderRoot = (root, node) => {
-  createRoot(root).render(/* @__PURE__ */ React2.createElement(ThemeProvider, {
+  createRoot(root).render(/* @__PURE__ */ React.createElement(ThemeProvider, {
     tx: defaultTx
   }, node));
   return root;
 };
 var createRenderer = (Component) => (el, props) => {
-  renderRoot(el, /* @__PURE__ */ React2.createElement(ThemeProvider, {
+  renderRoot(el, /* @__PURE__ */ React.createElement(ThemeProvider, {
     tx: defaultTx
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Provider, null, /* @__PURE__ */ React2.createElement(Component, props))));
+  }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Component, props))));
 };
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
@@ -854,7 +272,7 @@ var annotations = (options = {}) => {
   });
   return [
     annotationsState,
-    EditorView2.decorations.compute([
+    EditorView.decorations.compute([
       annotationsState
     ], (state) => {
       const annotations2 = state.field(annotationsState);
@@ -867,7 +285,7 @@ var annotations = (options = {}) => {
     styles
   ];
 };
-var styles = EditorView2.theme({
+var styles = EditorView.theme({
   ".cm-annotation": {
     textDecoration: "underline",
     textDecorationStyle: "wavy",
@@ -916,7 +334,7 @@ var autocomplete = ({ debug, activateOnTyping, override, onSearch } = {}) => {
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
 import { StateField as StateField2 } from "@codemirror/state";
-import { EditorView as EditorView3, ViewPlugin } from "@codemirror/view";
+import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
 import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/cursor.ts
@@ -1200,7 +618,7 @@ var automerge = (accessor) => {
       }
     }),
     // Reconcile local updates.
-    EditorView3.updateListener.of(({ view, changes }) => {
+    EditorView2.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
         syncer.reconcile(view, true);
       }
@@ -1210,7 +628,7 @@ var automerge = (accessor) => {
 
 // packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts
 import { Annotation as Annotation2, RangeSet } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView4, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { Decoration as Decoration2, EditorView as EditorView3, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
 import { Event } from "@dxos/async";
 import { Context } from "@dxos/context";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/awareness/awareness.ts";
@@ -1384,7 +802,7 @@ var RemoteCaretWidget = class extends WidgetType {
     return true;
   }
 };
-var styles2 = EditorView4.theme({
+var styles2 = EditorView3.theme({
   ".cm-collab-selection": {},
   ".cm-collab-selectionLine": {
     padding: 0,
@@ -1550,7 +968,7 @@ var SpaceAwarenessProvider = class {
 };
 
 // packages/ui/react-ui-editor/src/extensions/blast.ts
-import { EditorView as EditorView5, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView4, keymap as keymap2 } from "@codemirror/view";
 import defaultsDeep from "lodash.defaultsdeep";
 import { invariant as invariant2 } from "@dxos/invariant";
 var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/blast.ts";
@@ -1598,7 +1016,7 @@ var blast = (options = defaultOptions) => {
   };
   return [
     // Cursor moved.
-    EditorView5.updateListener.of((update2) => {
+    EditorView4.updateListener.of((update2) => {
       if (blaster?.node !== update2.view.scrollDOM) {
         if (blaster) {
           blaster.destroy();
@@ -1972,11 +1390,11 @@ var commandKeyBindings = [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/command/command.ts
-import { EditorView as EditorView7, keymap as keymap3 } from "@codemirror/view";
+import { EditorView as EditorView6, keymap as keymap3 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/extensions/command/hint.ts
 import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView6, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
+import { Decoration as Decoration3, EditorView as EditorView5, ViewPlugin as ViewPlugin3, WidgetType as WidgetType2 } from "@codemirror/view";
 var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
   constructor() {
     this.deco = Decoration3.none;
@@ -2000,7 +1418,7 @@ var hintViewPlugin = ({ onHint }) => ViewPlugin3.fromClass(class {
   }
 }, {
   provide: (plugin) => [
-    EditorView6.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
+    EditorView5.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration3.none)
   ]
 });
 var CommandHint = class extends WidgetType2 {
@@ -2119,10 +1537,10 @@ var command = (options = {}) => {
     options.onHint ? hintViewPlugin({
       onHint: options.onHint
     }) : [],
-    EditorView7.focusChangeEffect.of((_, focusing) => {
+    EditorView6.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
-    EditorView7.theme({
+    EditorView6.theme({
       ".cm-tooltip": {
         background: "transparent"
       }
@@ -2133,7 +1551,7 @@ var command = (options = {}) => {
 // packages/ui/react-ui-editor/src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
 import { StateEffect as StateEffect3, StateField as StateField4 } from "@codemirror/state";
-import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView9, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
+import { hoverTooltip, keymap as keymap5, Decoration as Decoration4, EditorView as EditorView8, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
 import { useEffect, useMemo as useMemo2 } from "react";
 import { debounce as debounce2 } from "@dxos/async";
@@ -2142,7 +1560,7 @@ import { isNonNullable } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/selection.ts
 import { Transaction } from "@codemirror/state";
-import { EditorView as EditorView8, keymap as keymap4 } from "@codemirror/view";
+import { EditorView as EditorView7, keymap as keymap4 } from "@codemirror/view";
 import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
@@ -2153,7 +1571,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
   return {
     selection,
     scrollIntoView: !scrollTo,
-    effects: scrollTo ? EditorView8.scrollIntoView(scrollTo, {
+    effects: scrollTo ? EditorView7.scrollIntoView(scrollTo, {
       yMargin: 96
     }) : void 0,
     annotations: Transaction.userEvent.of(stateRestoreAnnotation)
@@ -2195,7 +1613,7 @@ var selectionState = ({ getState, setState } = {}) => {
     //     setStateDebounced(id, {});
     //   },
     // }),
-    EditorView8.updateListener.of(({ view, transactions }) => {
+    EditorView7.updateListener.of(({ view, transactions }) => {
       const id = view.state.facet(documentId);
       if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
         return;
@@ -2276,7 +1694,7 @@ var commentsState = StateField4.define({
     return value;
   }
 });
-var styles3 = EditorView9.theme({
+var styles3 = EditorView8.theme({
   ".cm-comment, .cm-comment-current": {
     margin: "0 -3px",
     padding: "3px",
@@ -2296,7 +1714,7 @@ var createCommentMark = (id, isCurrent) => Decoration4.mark({
     "data-comment-id": id
   }
 });
-var commentsDecorations = EditorView9.decorations.compute([
+var commentsDecorations = EditorView8.decorations.compute([
   commentsState
 ], (state) => {
   const { selection: { current }, comments: comments2 } = state.field(commentsState);
@@ -2319,7 +1737,7 @@ var commentsDecorations = EditorView9.decorations.compute([
   return Decoration4.set(decorations);
 });
 var commentClickedEffect = StateEffect3.define();
-var handleCommentClick = EditorView9.domEventHandlers({
+var handleCommentClick = EditorView8.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
     const editorRoot = view.dom;
@@ -2358,7 +1776,7 @@ var trackPastedComments = (onUpdate) => {
     }
   };
   return [
-    EditorView9.domEventHandlers({
+    EditorView8.domEventHandlers({
       cut: handleTrack,
       copy: handleTrack
     }),
@@ -2380,7 +1798,7 @@ var trackPastedComments = (onUpdate) => {
       return effects;
     }),
     // Handle paste or the undo of comment deletion.
-    EditorView9.updateListener.of((update2) => {
+    EditorView8.updateListener.of((update2) => {
       const restore = [];
       for (let i = 0; i < update2.transactions.length; i++) {
         const tr = update2.transactions[i];
@@ -2439,7 +1857,7 @@ var mapTrackedComment = (comment, changes) => ({
 var restoreCommentEffect = StateEffect3.define({
   map: mapTrackedComment
 });
-var createComment2 = (view) => {
+var createComment = (view) => {
   const options = view.state.facet(optionsFacet);
   const { from, to } = view.state.selection.main;
   if (from === to) {
@@ -2484,7 +1902,7 @@ var comments = (options = {}) => {
     options.onCreate && keymap5.of([
       {
         key: shortcut,
-        run: callbackWrapper(createComment2)
+        run: callbackWrapper(createComment)
       }
     ]),
     //
@@ -2522,7 +1940,7 @@ var comments = (options = {}) => {
     //
     // Track deleted ranges and update ranges for decorations.
     //
-    EditorView9.updateListener.of(({ view, state, changes }) => {
+    EditorView8.updateListener.of(({ view, state, changes }) => {
       let mod = false;
       const { comments: comments2, ...value } = state.field(commentsState);
       changes.iterChanges((from, to, from2, to2) => {
@@ -2554,7 +1972,7 @@ var comments = (options = {}) => {
     //
     // Track selection/proximity.
     //
-    EditorView9.updateListener.of(({ view, state }) => {
+    EditorView8.updateListener.of(({ view, state }) => {
       let min = Infinity;
       const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
       const { head } = state.selection.main;
@@ -2608,7 +2026,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
           anchor: range.from
         } : void 0,
         effects: [
-          needsScroll ? EditorView9.scrollIntoView(range.from, center ? {
+          needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
             y: "center"
           } : void 0) : [],
           needsSelectionUpdate ? setSelection.of({
@@ -2660,7 +2078,7 @@ var createExternalCommentSync = (id, subscribe, getComments) => ViewPlugin5.from
   }
 });
 var useCommentState = (state) => {
-  return useMemo2(() => EditorView9.updateListener.of((update2) => {
+  return useMemo2(() => EditorView8.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       state.comment = selectionOverlapsComment(update2.state);
       state.selection = hasActiveSelection(update2.state);
@@ -2684,7 +2102,7 @@ var useComments = (view, id, comments2) => {
   });
 };
 var useCommentClickListener = (onCommentClick) => {
-  return useMemo2(() => EditorView9.updateListener.of((update2) => {
+  return useMemo2(() => EditorView8.updateListener.of((update2) => {
     update2.transactions.forEach((transaction) => {
       transaction.effects.forEach((effect) => {
         if (effect.is(commentClickedEffect)) {
@@ -2711,8 +2129,8 @@ var debugNodeLogger = (log8 = console.log) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/dnd.ts
-import { dropCursor, EditorView as EditorView10 } from "@codemirror/view";
-var styles4 = EditorView10.theme({
+import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
+var styles4 = EditorView9.theme({
   ".cm-dropCursor": {
     borderLeft: "2px solid var(--dx-accentText)",
     color: "var(--dx-accentText)",
@@ -2726,7 +2144,7 @@ var dropFile = (options = {}) => {
   return [
     styles4,
     dropCursor(),
-    EditorView10.domEventHandlers({
+    EditorView9.domEventHandlers({
       drop: (event, view) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
@@ -2753,7 +2171,7 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
-import { EditorView as EditorView12, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView11, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap6, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
 import defaultsDeep2 from "lodash.defaultsdeep";
 import merge from "lodash.merge";
 import { generateName } from "@dxos/display-name";
@@ -2762,7 +2180,7 @@ import { hexToHue, isNotFalsy as isNotFalsy3 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/focus.ts
 import { StateEffect as StateEffect4, StateField as StateField6 } from "@codemirror/state";
-import { EditorView as EditorView11 } from "@codemirror/view";
+import { EditorView as EditorView10 } from "@codemirror/view";
 var focusEffect = StateEffect4.define();
 var focusField = StateField6.define({
   create: () => false,
@@ -2777,7 +2195,7 @@ var focusField = StateField6.define({
 });
 var focus = [
   focusField,
-  EditorView11.domEventHandlers({
+  EditorView10.domEventHandlers({
     focus: (event, view) => {
       setTimeout(() => view.dispatch({
         effects: focusEffect.of(true)
@@ -2791,6 +2209,238 @@ var focus = [
   })
 ];
 
+// packages/ui/react-ui-editor/src/styles/markdown.ts
+import { mx } from "@dxos/react-ui-theme";
+var headings = {
+  1: "text-4xl",
+  2: "text-3xl",
+  3: "text-2xl",
+  4: "text-xl",
+  5: "text-lg",
+  6: ""
+};
+var theme = {
+  code: "font-mono !no-underline text-neutral-700 dark:text-neutral-300",
+  codeMark: "font-mono text-primary-500",
+  mark: "opacity-50",
+  heading: (level) => {
+    return mx(headings[level], "dark:text-primary-400");
+  }
+};
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import get from "lodash.get";
+import { tokens } from "@dxos/react-ui-theme";
+var getToken = (path, defaultValue) => {
+  const value = get(tokens, path, defaultValue);
+  return value?.toString() ?? "";
+};
+var fontBody = getToken("fontFamily.body");
+var fontMono = getToken("fontFamily.mono");
+
+// packages/ui/react-ui-editor/src/styles/theme.ts
+var defaultTheme = {
+  "&": {},
+  "&.cm-focused": {
+    outline: "none"
+  },
+  /**
+  * Scroller
+  */
+  ".cm-scroller": {
+    overflowY: "auto"
+  },
+  /**
+  * Content
+  * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+  */
+  ".cm-content": {
+    padding: "unset",
+    fontFamily: fontBody,
+    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px",
+    lineHeight: 1.5,
+    color: "unset"
+  },
+  /**
+  * Gutters
+  * NOTE: Gutters should have the same top margin as the content.
+  */
+  ".cm-gutters": {
+    borderRight: "none",
+    background: "transparent"
+  },
+  ".cm-gutter": {},
+  ".cm-gutter.cm-lineNumbers": {
+    paddingRight: "4px",
+    borderRight: "1px solid var(--dx-separator)"
+  },
+  ".cm-gutter.cm-lineNumbers .cm-gutterElement": {
+    minWidth: "40px",
+    alignContent: "center"
+  },
+  /**
+  * Height is set to match the corresponding line.
+  */
+  ".cm-gutterElement": {
+    alignItems: "center",
+    fontSize: "12px"
+  },
+  /**
+  * Line.
+  */
+  ".cm-line": {
+    paddingInline: 0
+  },
+  ".cm-activeLine": {
+    background: "var(--dx-cmActiveLine)"
+  },
+  /**
+  * Cursor (layer).
+  */
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeft: "2px solid var(--dx-cmCursor)"
+  },
+  ".cm-placeholder": {
+    color: "var(--dx-subdued)"
+  },
+  /**
+  * Selection (layer).
+  */
+  ".cm-selectionBackground": {
+    background: "var(--dx-cmSelection)"
+  },
+  /**
+  * Search.
+  * NOTE: Matches comment.
+  */
+  ".cm-searchMatch": {
+    margin: "0 -3px",
+    padding: "3px",
+    borderRadius: "3px",
+    background: "var(--dx-cmHighlightSurface)",
+    color: "var(--dx-cmHighlight)"
+  },
+  ".cm-searchMatch-selected": {
+    textDecoration: "underline"
+  },
+  /**
+  * Link.
+  */
+  ".cm-link": {
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textDecorationColor: "var(--dx-separator)",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem"
+  },
+  ".cm-link > span": {
+    color: "var(--dx-accentText)"
+  },
+  /**
+  * Tooltip.
+  */
+  ".cm-tooltip": {
+    background: "var(--dx-baseSurface)"
+  },
+  ".cm-tooltip-below": {},
+  /**
+  * Autocomplete.
+  * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+  */
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    marginTop: "4px",
+    marginLeft: "-3px"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+    maxHeight: "20em"
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
+    paddingLeft: "4px !important",
+    borderBottom: "none !important",
+    color: "var(--dx-accentText)"
+  },
+  ".cm-tooltip.cm-completionInfo": {
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important",
+    borderColor: "var(--dx-separator)"
+  },
+  ".cm-completionIcon": {
+    display: "none"
+  },
+  ".cm-completionLabel": {
+    fontFamily: fontBody
+  },
+  ".cm-completionMatchedText": {
+    textDecoration: "none !important",
+    opacity: 0.5
+  },
+  /**
+  * Panels
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  // TODO(burdon): Implement custom panel (with icon buttons).
+  ".cm-panels": {},
+  ".cm-panel": {
+    fontFamily: fontBody,
+    backgroundColor: "var(--surface-bg)"
+  },
+  ".cm-panel input, .cm-panel button, .cm-panel label": {
+    color: "var(--dx-subdued)",
+    fontFamily: fontBody,
+    fontSize: "14px",
+    all: "unset",
+    margin: "3px !important",
+    padding: "2px 6px !important",
+    outline: "1px solid transparent"
+  },
+  ".cm-panel input, .cm-panel button": {
+    backgroundColor: "var(--dx-input)"
+  },
+  ".cm-panel input:focus, .cm-panel button:focus": {
+    outline: "1px solid var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel label": {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer"
+  },
+  ".cm-panel input.cm-textfield": {},
+  ".cm-panel input[type=checkbox]": {
+    width: "8px",
+    height: "8px",
+    marginRight: "6px !important",
+    padding: "2px !important",
+    color: "var(--dx-accentFocusIndicator)"
+  },
+  ".cm-panel button": {
+    "&:hover": {
+      backgroundColor: "var(--dx-accentSurfaceHover) !important"
+    },
+    "&:active": {
+      backgroundColor: "var(--dx-accentSurfaceHover)"
+    }
+  },
+  ".cm-panel.cm-search": {
+    padding: "4px",
+    borderTop: "1px solid var(--dx-separator)"
+  }
+};
+
 // packages/ui/react-ui-editor/src/extensions/factories.ts
 var __dxlog_file8 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/factories.ts";
 var preventNewline = EditorState.transactionFilter.of((tr) => tr.newDoc.lines > 1 ? [] : tr);
@@ -2815,7 +2465,7 @@ var createBasicExtensions = (_props) => {
   const props = defaultsDeep2({}, _props, defaultBasicOptions);
   return [
     // NOTE: Doesn't catch errors in keymap functions.
-    EditorView12.exceptionSink.of((err) => {
+    EditorView11.exceptionSink.of((err) => {
       log5.catch(err, void 0, {
         F: __dxlog_file8,
         L: 96,
@@ -2830,12 +2480,12 @@ var createBasicExtensions = (_props) => {
     props.drawSelection && drawSelection({
       cursorBlinkRate: 1200
     }),
-    props.editable !== void 0 && EditorView12.editable.of(props.editable),
+    props.editable !== void 0 && EditorView11.editable.of(props.editable),
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
-    props.lineWrapping && EditorView12.lineWrapping,
+    props.lineWrapping && EditorView11.lineWrapping,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -2872,14 +2522,14 @@ var defaultThemeSlots = {
 var createThemeExtensions = ({ themeMode, styles: styles5, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
   const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
   return [
-    EditorView12.darkTheme.of(themeMode === "dark"),
-    EditorView12.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
+    EditorView11.darkTheme.of(themeMode === "dark"),
+    EditorView11.baseTheme(styles5 ? merge({}, defaultTheme, styles5) : defaultTheme),
     // https://github.com/codemirror/theme-one-dark
     _syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
-    slots.editor?.className && EditorView12.editorAttributes.of({
+    slots.editor?.className && EditorView11.editorAttributes.of({
       class: slots.editor.className
     }),
-    slots.content?.className && EditorView12.contentAttributes.of({
+    slots.content?.className && EditorView11.contentAttributes.of({
       class: slots.content.className
     })
   ].filter(isNotFalsy3);
@@ -2908,8 +2558,8 @@ var createDataExtensions = ({ id, text, space, identity }) => {
 
 // packages/ui/react-ui-editor/src/extensions/folding.tsx
 import { codeFolding, foldGutter } from "@codemirror/language";
-import { EditorView as EditorView13 } from "@codemirror/view";
-import React3 from "react";
+import { EditorView as EditorView12 } from "@codemirror/view";
+import React2 from "react";
 import { Icon } from "@dxos/react-ui";
 var folding = (_props = {}) => [
   codeFolding({
@@ -2922,7 +2572,7 @@ var folding = (_props = {}) => [
       const el = createElement("div", {
         className: "flex h-full items-center"
       });
-      return renderRoot(el, /* @__PURE__ */ React3.createElement(Icon, {
+      return renderRoot(el, /* @__PURE__ */ React2.createElement(Icon, {
         icon: "ph--caret-right--bold",
         size: 3,
         classNames: [
@@ -2932,7 +2582,7 @@ var folding = (_props = {}) => [
       }));
     }
   }),
-  EditorView13.theme({
+  EditorView12.theme({
     ".cm-foldGutter": {
       opacity: 0.3,
       transition: "opacity 0.3s",
@@ -2945,14 +2595,14 @@ var folding = (_props = {}) => [
 ];
 
 // packages/ui/react-ui-editor/src/extensions/listener.ts
-import { EditorView as EditorView14 } from "@codemirror/view";
+import { EditorView as EditorView13 } from "@codemirror/view";
 var listener = ({ onFocus, onChange }) => {
   const extensions = [];
-  onFocus && extensions.push(EditorView14.focusChangeEffect.of((_, focusing) => {
+  onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
     onFocus(focusing);
     return null;
   }));
-  onChange && extensions.push(EditorView14.updateListener.of((update2) => {
+  onChange && extensions.push(EditorView13.updateListener.of((update2) => {
     onChange(update2.state.doc.toString(), update2.state.facet(documentId));
   }));
   return extensions;
@@ -2962,7 +2612,7 @@ var listener = ({ onFocus, onChange }) => {
 import { snippet } from "@codemirror/autocomplete";
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
-import { EditorView as EditorView15, keymap as keymap7 } from "@codemirror/view";
+import { EditorView as EditorView14, keymap as keymap7 } from "@codemirror/view";
 import { useMemo as useMemo3 } from "react";
 var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
 var Inline;
@@ -4051,7 +3701,7 @@ var getFormatting = (state) => {
   };
 };
 var useFormattingState = (state) => {
-  return useMemo3(() => EditorView15.updateListener.of((update2) => {
+  return useMemo3(() => EditorView14.updateListener.of((update2) => {
     if (update2.docChanged || update2.selectionSet) {
       Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
         state[key] = active;
@@ -4099,7 +3749,7 @@ var processEditorPayload = (view, { type, data }) => {
       })(view);
       break;
     case "comment":
-      createComment2(view);
+      createComment(view);
       break;
   }
   requestAnimationFrame(() => {
@@ -4363,9 +4013,9 @@ var convertTreeToJson = (state) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder3, StateEffect as StateEffect5 } from "@codemirror/state";
-import { EditorView as EditorView19, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { EditorView as EditorView18, Decoration as Decoration7, WidgetType as WidgetType5, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-editor/src/extensions/markdown/changes.ts
 import { syntaxTree as syntaxTree4 } from "@codemirror/language";
@@ -4514,7 +4164,7 @@ var getValidUrl = (str) => {
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import { StateField as StateField8 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView16, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
 var image = (_options = {}) => {
   return [
     StateField8.define({
@@ -4542,7 +4192,7 @@ var image = (_options = {}) => {
           add: buildDecorations(from, to, tr.state)
         });
       },
-      provide: (field) => EditorView16.decorations.from(field)
+      provide: (field) => EditorView15.decorations.from(field)
     })
   ];
 };
@@ -4602,10 +4252,10 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
-import { EditorView as EditorView17 } from "@codemirror/view";
+import { EditorView as EditorView16 } from "@codemirror/view";
 var bulletListIndentationWidth = 24;
 var orderedListIndentationWidth = 36;
-var formattingStyles = EditorView17.theme({
+var formattingStyles = EditorView16.theme({
   /**
   * Horizontal rule.
   */
@@ -4726,12 +4376,12 @@ var formattingStyles = EditorView17.theme({
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
 import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField9 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView18, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField9.define({
     create: (state) => update(state, options),
     update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView18.decorations.from(field)
+    provide: (field) => EditorView17.decorations.from(field)
   });
 };
 var update = (state, _options) => {
@@ -4917,16 +4567,16 @@ var TextWidget = class extends WidgetType5 {
 };
 var hide = Decoration7.replace({});
 var blockQuote = Decoration7.line({
-  class: mx3("cm-blockquote")
+  class: mx2("cm-blockquote")
 });
 var fencedCodeLine = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line")
+  class: mx2("cm-code cm-codeblock-line")
 });
 var fencedCodeLineFirst = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-first")
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-first")
 });
 var fencedCodeLineLast = Decoration7.line({
-  class: mx3("cm-code cm-codeblock-line", "cm-codeblock-last")
+  class: mx2("cm-code cm-codeblock-line", "cm-codeblock-last")
 });
 var commentBlockLine = fencedCodeLine;
 var commentBlockLineFirst = fencedCodeLineFirst;
@@ -5224,419 +4874,838 @@ var buildDecorations2 = (view, options, focus2) => {
         leave: wrapWithCatch(leaveNode)
       });
     }
-  } else {
-    tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode)
-    });
+  } else {
+    tree.iterate({
+      enter: wrapWithCatch(enterNode),
+      leave: wrapWithCatch(leaveNode)
+    });
+  }
+  return {
+    deco: deco.finish(),
+    atomicDeco: atomicDeco.finish()
+  };
+};
+var forceUpdate = StateEffect5.define();
+var decorateMarkdown = (options = {}) => {
+  return [
+    ViewPlugin7.fromClass(class {
+      constructor(view) {
+        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+      }
+      update(update2) {
+        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
+          this.clearUpdate();
+        } else if (update2.selectionSet) {
+          this.scheduleUpdate(update2.view);
+        }
+      }
+      // Defer update in case moving through the document.
+      scheduleUpdate(view) {
+        this.clearUpdate();
+        this.pendingUpdate = setTimeout(() => {
+          view.dispatch({
+            effects: forceUpdate.of(null)
+          });
+        }, options.selectionChangeDelay);
+      }
+      clearUpdate() {
+        if (this.pendingUpdate) {
+          clearTimeout(this.pendingUpdate);
+          this.pendingUpdate = void 0;
+        }
+      }
+      destroy() {
+        this.clearUpdate();
+      }
+    }, {
+      provide: (plugin) => [
+        EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
+        EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
+      ]
+    }),
+    image(),
+    table(),
+    adjustChanges(),
+    formattingStyles
+  ];
+};
+
+// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
+import { syntaxTree as syntaxTree8 } from "@codemirror/language";
+import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var linkTooltip = (renderTooltip) => {
+  return hoverTooltip2((view, pos, side) => {
+    const syntax = syntaxTree8(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === "Link" ? node : null;
+    }
+    const url = link && link.getChild("URL");
+    if (!url || !link) {
+      return null;
+    }
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      // NOTE: Forcing above causes the tooltip to flicker.
+      // above: true,
+      create: () => {
+        const el = document.createElement("div");
+        el.className = tooltipContent({});
+        renderTooltip(el, {
+          url: urlText
+        }, view);
+        return {
+          dom: el,
+          offset: {
+            x: 0,
+            y: 4
+          }
+        };
+      }
+    };
+  }, {
+    // NOTE: 0 = default of 300ms.
+    hoverTime: 1
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/mention.ts
+import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
+import { log as log6 } from "@dxos/log";
+var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
+var mention = ({ debug, onSearch }) => {
+  return autocompletion2({
+    // TODO(burdon): Not working.
+    activateOnTyping: true,
+    // activateOnTypingDelay: 100,
+    // selectOnOpen: true,
+    closeOnBlur: !debug,
+    // defaultKeymap: false,
+    icons: false,
+    override: [
+      (context) => {
+        log6.info("completion context", {
+          context
+        }, {
+          F: __dxlog_file10,
+          L: 27,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const match = context.matchBefore(/@(\w+)?/);
+        if (!match || match.from === match.to && !context.explicit) {
+          return null;
+        }
+        return {
+          from: match.from,
+          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
+            label: `@${value}`
+          }))
+        };
+      }
+    ]
+  });
+};
+
+// packages/ui/react-ui-editor/src/extensions/modes.ts
+import { keymap as keymap9 } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { Schema } from "effect";
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+var editorInputMode = singleValueFacet({});
+var InputModeExtensions = {
+  default: [],
+  vscode: [
+    // https://github.com/replit/codemirror-vscode-keymap
+    editorInputMode.of({
+      type: "vscode"
+    }),
+    keymap9.of(vscodeKeymap)
+  ],
+  vim: [
+    // https://github.com/replit/codemirror-vim
+    vim(),
+    editorInputMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    keymap9.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dom.parentElement?.focus();
+          return true;
+        }
+      }
+    ])
+  ]
+};
+
+// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
+import "@dxos/lit-ui/dx-ref-tag.pcss";
+import { syntaxTree as syntaxTree9 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField10 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView19, WidgetType as WidgetType6 } from "@codemirror/view";
+var preview = (options = {}) => {
+  return [
+    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
+    // "Block decorations may not be specified via plugins"
+    StateField10.define({
+      create: (state) => buildDecorations3(state, options),
+      update: (_, tr) => buildDecorations3(tr.state, options),
+      provide: (field) => [
+        EditorView19.decorations.from(field),
+        EditorView19.atomicRanges.of((view) => view.state.field(field))
+      ]
+    }),
+    EditorView19.theme({
+      ".cm-preview-block": {
+        marginLeft: "-1rem",
+        marginRight: "-1rem",
+        padding: "1rem",
+        borderRadius: "0.5rem",
+        background: "var(--dx-modalSurface)",
+        border: "1px solid var(--dx-separator)"
+      }
+    })
+  ];
+};
+var getLinkRef = (state, node) => {
+  const mark = node.getChild("LinkMark");
+  const label = node.getChild("LinkLabel");
+  if (mark && label) {
+    const ref = state.sliceDoc(label.from + 1, label.to - 1);
+    return {
+      suggest: ref.startsWith("?"),
+      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
+      label: state.sliceDoc(mark.to, label.from - 1),
+      ref: ref.startsWith("?") ? ref.slice(1) : ref
+    };
+  }
+};
+var buildDecorations3 = (state, options) => {
+  const builder = new RangeSetBuilder4();
+  syntaxTree9(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        //
+        // Decoration.
+        // [Label][dxn:echo:123]
+        //
+        case "Link": {
+          const link = getLinkRef(state, node.node);
+          if (link) {
+            builder.add(node.from, node.to, Decoration8.replace({
+              widget: new PreviewInlineWidget(options, link)
+            }));
+          }
+          break;
+        }
+        //
+        // Block widget.
+        // ![Label][dxn:echo:123]
+        //
+        case "Image": {
+          const link = getLinkRef(state, node.node);
+          if (options.renderBlock && link) {
+            builder.add(node.from, node.to, Decoration8.replace({
+              block: true,
+              // atomic: true,
+              widget: new PreviewBlockWidget(options, link)
+            }));
+          }
+          break;
+        }
+      }
+    }
+  });
+  return builder.finish();
+};
+var PreviewInlineWidget = class extends WidgetType6 {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return false;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+  }
+  toDOM(view) {
+    const root = document.createElement("dx-ref-tag");
+    root.textContent = this._link.label;
+    root.setAttribute("ref", this._link.ref);
+    return root;
   }
-  return {
-    deco: deco.finish(),
-    atomicDeco: atomicDeco.finish()
-  };
 };
-var forceUpdate = StateEffect5.define();
-var decorateMarkdown = (options = {}) => {
-  return [
-    ViewPlugin7.fromClass(class {
-      constructor(view) {
-        ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(view, options, view.hasFocus));
+var PreviewBlockWidget = class extends WidgetType6 {
+  constructor(_options, _link) {
+    super();
+    this._options = _options;
+    this._link = _link;
+  }
+  // override ignoreEvent() {
+  //   return true;
+  // }
+  eq(other) {
+    return this._link.ref === other._link.ref;
+  }
+  toDOM(view) {
+    const root = document.createElement("div");
+    root.classList.add("cm-preview-block");
+    const handleAction = (action) => {
+      const pos = view.posAtDOM(root);
+      const node = syntaxTree9(view.state).resolve(pos + 1).node.parent;
+      if (!node) {
+        return;
       }
-      update(update2) {
-        if (update2.docChanged || update2.viewportChanged || update2.focusChanged || update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) || update2.selectionSet && !options.selectionChangeDelay) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations2(update2.view, options, update2.view.hasFocus));
-          this.clearUpdate();
-        } else if (update2.selectionSet) {
-          this.scheduleUpdate(update2.view);
-        }
+      const link = getLinkRef(view.state, node);
+      if (link?.ref !== action.link.ref) {
+        return;
       }
-      // Defer update in case moving through the document.
-      scheduleUpdate(view) {
-        this.clearUpdate();
-        this.pendingUpdate = setTimeout(() => {
+      switch (action.type) {
+        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
+        // Insert ref text.
+        case "insert": {
           view.dispatch({
-            effects: forceUpdate.of(null)
+            changes: {
+              from: node.from,
+              to: node.to,
+              insert: action.target.text
+            }
           });
-        }, options.selectionChangeDelay);
-      }
-      clearUpdate() {
-        if (this.pendingUpdate) {
-          clearTimeout(this.pendingUpdate);
-          this.pendingUpdate = void 0;
+          break;
+        }
+        // Remove ref.
+        case "delete": {
+          view.dispatch({
+            changes: {
+              from: node.from,
+              to: node.to
+            }
+          });
+          break;
         }
       }
-      destroy() {
-        this.clearUpdate();
+    };
+    this._options.renderBlock(root, {
+      readonly: view.state.readOnly,
+      link: this._link,
+      onAction: handleAction,
+      onLookup: this._options.onLookup
+    }, view);
+    return root;
+  }
+};
+
+// packages/ui/react-ui-editor/src/extensions/typewriter.ts
+import { keymap as keymap10 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap10.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
       }
-    }, {
-      provide: (plugin) => [
-        EditorView19.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration7.none),
-        EditorView19.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration7.none)
-      ]
-    }),
-    image(),
-    table(),
-    adjustChanges(),
-    formattingStyles
+    ])
   ];
 };
 
-// packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree8 } from "@codemirror/language";
-import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var linkTooltip = (renderTooltip) => {
-  return hoverTooltip2((view, pos, side) => {
-    const syntax = syntaxTree8(view.state).resolveInner(pos, side);
-    let link = null;
-    for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
-      link = node.name === "Link" ? node : null;
+// packages/ui/react-ui-editor/src/components/EditorToolbar/blocks.ts
+var createBlockGroupAction = (value) => createEditorActionGroup("block", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+var createBlockActions = (value, getView, blankLine) => Object.entries({
+  blockquote: "ph--quotes--regular",
+  codeblock: "ph--code-block--regular",
+  table: "ph--table--regular"
+}).map(([type, icon]) => {
+  const checked = type === value;
+  return createEditorAction(type, () => {
+    const view = getView();
+    if (!view) {
+      return;
     }
-    const url = link && link.getChild("URL");
-    if (!url || !link) {
-      return null;
+    switch (type) {
+      case "blockquote":
+        checked ? removeBlockquote(view) : addBlockquote(view);
+        break;
+      case "codeblock":
+        checked ? removeCodeblock(view) : addCodeblock(view);
+        break;
+      case "table":
+        insertTable(view);
+        break;
     }
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      // NOTE: Forcing above causes the tooltip to flicker.
-      // above: true,
-      create: () => {
-        const el = document.createElement("div");
-        el.className = tooltipContent({});
-        renderTooltip(el, {
-          url: urlText
-        }, view);
-        return {
-          dom: el,
-          offset: {
-            x: 0,
-            y: 4
-          }
-        };
+  }, {
+    checked,
+    ...type === "table" && {
+      disabled: !!blankLine
+    },
+    icon
+  });
+});
+var createBlocks = (state, getView) => {
+  const value = state?.blockQuote ? "blockquote" : state.blockType ?? "";
+  const blockGroupAction = createBlockGroupAction(value);
+  const blockActions = createBlockActions(value, getView, state.blankLine);
+  return {
+    nodes: [
+      blockGroupAction,
+      ...blockActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "block"
+      },
+      ...blockActions.map(({ id }) => ({
+        source: blockGroupAction.id,
+        target: id
+      }))
+    ]
+  };
+};
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/comment.ts
+var commentLabel = (comment, selection) => comment ? "selection overlaps existing comment label" : selection === false ? "select text to comment label" : "comment label";
+var createCommentAction = (label, getView) => createEditorAction("comment", () => createComment(getView()), {
+  testId: "editor.toolbar.comment",
+  icon: "ph--chat-text--regular",
+  label
+});
+var createComment2 = (state, getView) => ({
+  nodes: [
+    createCommentAction([
+      commentLabel(state.comment, state.selection),
+      {
+        ns: translationKey
       }
-    };
+    ], getView)
+  ],
+  edges: [
+    {
+      source: "root",
+      target: "comment"
+    }
+  ]
+});
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/formatting.ts
+var formats = {
+  strong: "ph--text-b--regular",
+  emphasis: "ph--text-italic--regular",
+  strikethrough: "ph--text-strikethrough--regular",
+  code: "ph--code--regular",
+  link: "ph--link--regular"
+};
+var createFormattingGroup = (formatting) => createEditorActionGroup("formatting", {
+  variant: "toggleGroup",
+  selectCardinality: "multiple",
+  value: Object.keys(formats).filter((key) => !!formatting[key])
+});
+var createFormattingActions = (formatting, getView) => Object.entries(formats).map(([type, icon]) => {
+  const checked = !!formatting[type];
+  return createEditorAction(type, () => {
+    const view = getView();
+    if (!view) {
+      return;
+    }
+    if (type === "link") {
+      checked ? removeLink(view) : addLink()(view);
+      return;
+    }
+    const inlineType = type === "strong" ? Inline.Strong : type === "emphasis" ? Inline.Emphasis : type === "strikethrough" ? Inline.Strikethrough : Inline.Code;
+    setStyle(inlineType, !checked)(view);
   }, {
-    // NOTE: 0 = default of 300ms.
-    hoverTime: 1
+    checked,
+    icon
   });
+});
+var createFormatting = (state, getView) => {
+  const formattingGroupAction = createFormattingGroup(state);
+  const formattingActions = createFormattingActions(state, getView);
+  return {
+    nodes: [
+      formattingGroupAction,
+      ...formattingActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "formatting"
+      },
+      ...formattingActions.map(({ id }) => ({
+        source: formattingGroupAction.id,
+        target: id
+      }))
+    ]
+  };
 };
 
-// packages/ui/react-ui-editor/src/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-import { log as log6 } from "@dxos/log";
-var __dxlog_file10 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/extensions/mention.ts";
-var mention = ({ debug, onSearch }) => {
-  return autocompletion2({
-    // TODO(burdon): Not working.
-    activateOnTyping: true,
-    // activateOnTypingDelay: 100,
-    // selectOnOpen: true,
-    closeOnBlur: !debug,
-    // defaultKeymap: false,
-    icons: false,
-    override: [
-      (context) => {
-        log6.info("completion context", {
-          context
-        }, {
-          F: __dxlog_file10,
-          L: 27,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
+// packages/ui/react-ui-editor/src/components/EditorToolbar/headings.ts
+var createHeadingGroupAction = (value) => createEditorActionGroup("heading", {
+  variant: "dropdownMenu",
+  applyActive: true,
+  selectCardinality: "single",
+  value
+}, "ph--text-h--regular");
+var createHeadingActions = (getView) => Object.entries({
+  "0": "ph--paragraph--regular",
+  "1": "ph--text-h-one--regular",
+  "2": "ph--text-h-two--regular",
+  "3": "ph--text-h-three--regular",
+  "4": "ph--text-h-four--regular",
+  "5": "ph--text-h-five--regular",
+  "6": "ph--text-h-six--regular"
+}).map(([levelStr, icon]) => {
+  const level = parseInt(levelStr);
+  return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
+    label: [
+      "heading level label",
+      {
+        count: level,
+        ns: translationKey
       }
-    ]
+    ],
+    icon
   });
+});
+var computeHeadingValue = (state) => {
+  const blockType = state ? state.blockType : "paragraph";
+  const header = blockType && /heading(\d)/.exec(blockType);
+  return header ? header[1] : blockType === "paragraph" || !blockType ? "0" : "";
+};
+var createHeadings = (state, getView) => {
+  const headingValue = computeHeadingValue(state);
+  const headingGroupAction = createHeadingGroupAction(headingValue);
+  const headingActions = createHeadingActions(getView);
+  return {
+    nodes: [
+      headingGroupAction,
+      ...headingActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "heading"
+      },
+      ...headingActions.map(({ id }) => ({
+        source: headingGroupAction.id,
+        target: id
+      }))
+    ]
+  };
 };
 
-// packages/ui/react-ui-editor/src/extensions/modes.ts
-import { keymap as keymap9 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
-import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
-import { S } from "@dxos/echo-schema";
-var EditorViewModes = [
-  "preview",
-  "readonly",
-  "source"
-];
-var EditorViewMode = S.Union(...EditorViewModes.map((mode) => S.Literal(mode)));
-var EditorInputModes = [
-  "default",
-  "vim",
-  "vscode"
-];
-var EditorInputMode = S.Union(...EditorInputModes.map((mode) => S.Literal(mode)));
-var editorInputMode = singleValueFacet({});
-var InputModeExtensions = {
-  default: [],
-  vscode: [
-    // https://github.com/replit/codemirror-vscode-keymap
-    editorInputMode.of({
-      type: "vscode"
-    }),
-    keymap9.of(vscodeKeymap)
+// packages/ui/react-ui-editor/src/components/EditorToolbar/image.ts
+var createImageUploadAction = (onImageUpload) => createEditorAction("image", onImageUpload, {
+  testId: "editor.toolbar.image",
+  icon: "ph--image-square--regular"
+});
+var createImageUpload = (onImageUpload) => ({
+  nodes: [
+    createImageUploadAction(onImageUpload)
   ],
-  vim: [
-    // https://github.com/replit/codemirror-vim
-    vim(),
-    editorInputMode.of({
-      type: "vim",
-      noTabster: true
-    }),
-    keymap9.of([
-      {
-        key: "Alt-Escape",
-        run: (view) => {
-          view.dom.parentElement?.focus();
-          return true;
-        }
-      }
-    ])
+  edges: [
+    {
+      source: "root",
+      target: "image"
+    }
   ]
-};
+});
 
-// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
-import "@dxos/lit-ui/dx-ref-tag.pcss";
-import { syntaxTree as syntaxTree9 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField10 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
-var preview = (options = {}) => {
-  return [
-    // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins"
-    StateField10.define({
-      create: (state) => buildDecorations3(state, options),
-      update: (_, tr) => buildDecorations3(tr.state, options),
-      provide: (field) => [
-        EditorView20.decorations.from(field),
-        EditorView20.atomicRanges.of((view) => view.state.field(field))
-      ]
-    }),
-    EditorView20.theme({
-      ".cm-preview-block": {
-        marginLeft: "-1rem",
-        marginRight: "-1rem",
-        padding: "1rem",
-        borderRadius: "0.5rem",
-        background: "var(--dx-modalSurface)",
-        border: "1px solid var(--dx-separator)"
-      }
-    })
-  ];
-};
-var getLinkRef = (state, node) => {
-  const mark = node.getChild("LinkMark");
-  const label = node.getChild("LinkLabel");
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
-    return {
-      suggest: ref.startsWith("?"),
-      block: state.sliceDoc(mark.from, mark.from + 1) === "!",
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith("?") ? ref.slice(1) : ref
-    };
-  }
+// packages/ui/react-ui-editor/src/components/EditorToolbar/lists.ts
+var listStyles = {
+  bullet: "ph--list-bullets--regular",
+  ordered: "ph--list-numbers--regular",
+  task: "ph--list-checks--regular"
 };
-var buildDecorations3 = (state, options) => {
-  const builder = new RangeSetBuilder4();
-  syntaxTree9(state).iterate({
-    enter: (node) => {
-      switch (node.name) {
-        //
-        // Decoration.
-        // [Label][dxn:echo:123]
-        //
-        case "Link": {
-          const link = getLinkRef(state, node.node);
-          if (link) {
-            builder.add(node.from, node.to, Decoration8.replace({
-              widget: new PreviewInlineWidget(options, link)
-            }));
-          }
-          break;
-        }
-        //
-        // Block widget.
-        // ![Label][dxn:echo:123]
-        //
-        case "Image": {
-          const link = getLinkRef(state, node.node);
-          if (options.renderBlock && link) {
-            builder.add(node.from, node.to, Decoration8.replace({
-              block: true,
-              // atomic: true,
-              widget: new PreviewBlockWidget(options, link)
-            }));
-          }
-          break;
-        }
-      }
+var createListGroupAction = (value) => createEditorActionGroup("list", {
+  variant: "toggleGroup",
+  selectCardinality: "single",
+  value
+});
+var createListActions = (value, getView) => Object.entries(listStyles).map(([listStyle, icon]) => {
+  const checked = value === listStyle;
+  return createEditorAction(`list-${listStyle}`, () => {
+    const view = getView();
+    if (!view) {
+      return;
+    }
+    const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
+    if (checked) {
+      removeList(listType)(view);
+    } else {
+      addList(listType)(view);
+    }
+  }, {
+    checked,
+    icon
+  });
+});
+var createLists = (state, getView) => {
+  const value = state.listStyle ?? "";
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value, getView);
+  return {
+    nodes: [
+      listGroupAction,
+      ...listActionsMap
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "list"
+      },
+      ...listActionsMap.map(({ id }) => ({
+        source: listGroupAction.id,
+        target: id
+      }))
+    ]
+  };
+};
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/search.ts
+import { openSearchPanel } from "@codemirror/search";
+var createSearchAction = (getView) => createEditorAction("search", () => openSearchPanel(getView()), {
+  testId: "editor.toolbar.search",
+  icon: "ph--magnifying-glass--regular"
+});
+var createSearch = (getView) => ({
+  nodes: [
+    createSearchAction(getView)
+  ],
+  edges: [
+    {
+      source: "root",
+      target: "search"
     }
+  ]
+});
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/view-mode.ts
+var createViewModeGroupAction = (value) => createEditorActionGroup("viewMode", {
+  variant: "dropdownMenu",
+  applyActive: true,
+  selectCardinality: "single",
+  value
+}, "ph--eye--regular");
+var createViewModeActions = (value, onViewModeChange) => Object.entries({
+  preview: "ph--eye--regular",
+  source: "ph--pencil-simple--regular",
+  readonly: "ph--pencil-slash--regular"
+}).map(([viewMode, icon]) => {
+  const checked = viewMode === value;
+  return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode), {
+    label: [
+      `${viewMode} mode label`,
+      {
+        ns: translationKey
+      }
+    ],
+    checked,
+    icon
   });
-  return builder.finish();
+});
+var createViewMode = (state, onViewModeChange) => {
+  const value = state.viewMode ?? "source";
+  const viewModeGroupAction = createViewModeGroupAction(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
+  return {
+    nodes: [
+      viewModeGroupAction,
+      ...viewModeActions
+    ],
+    edges: [
+      {
+        source: "root",
+        target: "viewMode"
+      },
+      ...viewModeActions.map(({ id }) => ({
+        source: viewModeGroupAction.id,
+        target: id
+      }))
+    ]
+  };
 };
-var PreviewInlineWidget = class extends WidgetType6 {
-  constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+
+// packages/ui/react-ui-editor/src/defaults.ts
+import { EditorView as EditorView20 } from "@codemirror/view";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var margin = "!mt-[1rem]";
+var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
+var editorContent = mx3(margin, editorWidth);
+var editorFullWidth = mx3(margin);
+var editorGutter = EditorView20.theme({
+  // Match margin from content.
+  // Gutter = 2rem + 1rem margin.
+  ".cm-gutters": {
+    marginTop: "1rem",
+    paddingRight: "1rem"
   }
-  // override ignoreEvent() {
-  //   return false;
-  // }
-  eq(other) {
-    return this._link.ref === other._link.ref && this._link.label === other._link.label;
+});
+var editorMonospace = EditorView20.theme({
+  ".cm-content": {
+    fontFamily: fontMono
   }
-  toDOM(view) {
-    const root = document.createElement("dx-ref-tag");
-    root.setAttribute("label", this._link.label);
-    root.setAttribute("ref", this._link.ref);
-    return root;
+});
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
+var stackItemContentEditorClassNames = (role) => mx3("attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2", role === "section" ? "[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24" : "min-bs-0");
+var stackItemContentToolbarClassNames = (role) => mx3("attention-surface is-full border-be !border-separator relative z-[1]", role === "section" && "sticky block-start-0 -mbe-px min-is-0");
+
+// packages/ui/react-ui-editor/src/components/EditorToolbar/EditorToolbar.tsx
+var createToolbar = ({ getView, state, customActions, ...features }) => {
+  const nodes = [];
+  const edges = [];
+  if (features.headings ?? true) {
+    const headings2 = createHeadings(state, getView);
+    nodes.push(...headings2.nodes);
+    edges.push(...headings2.edges);
   }
-};
-var PreviewBlockWidget = class extends WidgetType6 {
-  constructor(_options, _link) {
-    super();
-    this._options = _options;
-    this._link = _link;
+  if (features.formatting ?? true) {
+    const formatting = createFormatting(state, getView);
+    nodes.push(...formatting.nodes);
+    edges.push(...formatting.edges);
   }
-  // override ignoreEvent() {
-  //   return true;
-  // }
-  eq(other) {
-    return this._link.ref === other._link.ref;
+  if (features.lists ?? true) {
+    const lists = createLists(state, getView);
+    nodes.push(...lists.nodes);
+    edges.push(...lists.edges);
   }
-  toDOM(view) {
-    const root = document.createElement("div");
-    root.classList.add("cm-preview-block");
-    const handleAction = (action) => {
-      const pos = view.posAtDOM(root);
-      const node = syntaxTree9(view.state).resolve(pos + 1).node.parent;
-      if (!node) {
-        return;
-      }
-      const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
-        return;
-      }
-      switch (action.type) {
-        // TODO(burdon): Should we dispatch to the view or mutate the document? (i.e., handle externally?)
-        // Insert ref text.
-        case "insert": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to,
-              insert: action.target.text
-            }
-          });
-          break;
-        }
-        // Remove ref.
-        case "delete": {
-          view.dispatch({
-            changes: {
-              from: node.from,
-              to: node.to
-            }
-          });
-          break;
-        }
-      }
-    };
-    this._options.renderBlock(root, {
-      readonly: view.state.readOnly,
-      link: this._link,
-      onAction: handleAction,
-      onLookup: this._options.onLookup
-    }, view);
-    return root;
+  if (features.blocks ?? true) {
+    const blocks = createBlocks(state, getView);
+    nodes.push(...blocks.nodes);
+    edges.push(...blocks.edges);
   }
+  if (features.image) {
+    const image2 = createImageUpload(features.image);
+    nodes.push(...image2.nodes);
+    edges.push(...image2.edges);
+  }
+  if (customActions) {
+    const custom = customActions();
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
+  const editorToolbarGap = createGapSeparator();
+  nodes.push(...editorToolbarGap.nodes);
+  edges.push(...editorToolbarGap.edges);
+  if (features.comment) {
+    const comment = createComment2(state, getView);
+    nodes.push(...comment.nodes);
+    edges.push(...comment.edges);
+  }
+  if (features.search ?? true) {
+    const search = createSearch(getView);
+    nodes.push(...search.nodes);
+    edges.push(...search.edges);
+  }
+  if (features.viewMode) {
+    const viewMode = createViewMode(state, features.viewMode);
+    nodes.push(...viewMode.nodes);
+    edges.push(...viewMode.edges);
+  }
+  return {
+    nodes,
+    edges
+  };
 };
-
-// packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap10 } from "@codemirror/view";
-var defaultItems = [
-  "hello world!",
-  "this is a test.",
-  "this is [DXOS](https://dxos.org)"
-];
-var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
-  let t;
-  let idx = 0;
-  return [
-    keymap10.of([
-      {
-        // Reset.
-        key: "alt-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          idx = 0;
-          return true;
-        }
-      },
-      {
-        // Next prompt.
-        // TODO(burdon): Press 1-9 to select prompt?
-        key: "shift-meta-'",
-        run: (view) => {
-          clearTimeout(t);
-          const text = items[idx++];
-          if (idx === items?.length) {
-            idx = 0;
-          }
-          let i = 0;
-          const insert = (d = 0) => {
-            t = setTimeout(() => {
-              const pos = view.state.selection.main.head;
-              view.dispatch({
-                changes: {
-                  from: pos,
-                  insert: text[i++]
-                },
-                selection: {
-                  anchor: pos + 1
-                }
-              });
-              if (i < text.length) {
-                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
-              }
-            }, d);
-          };
-          insert();
-          return true;
-        }
-      }
-    ])
-  ];
-};
-
-// packages/ui/react-ui-editor/src/hooks/useActionHandler.ts
-import { useCallback as useCallback2 } from "react";
-var useActionHandler = (view) => {
-  return useCallback2((action) => view && processEditorPayload(view, action.properties), [
-    view
+var useEditorToolbarActionGraph = (props) => {
+  const menuCreator = useCallback(() => createToolbar(props), [
+    props
   ]);
+  return useMenuActions(menuCreator);
 };
+var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...props }) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: stackItemContentToolbarClassNames(role)
+  }, /* @__PURE__ */ React3.createElement(ElevationProvider, {
+    elevation: role === "section" ? "positioned" : "base"
+  }, /* @__PURE__ */ React3.createElement(MenuProvider, {
+    ...menuProps,
+    attendableId
+  }, /* @__PURE__ */ React3.createElement(ToolbarMenu, {
+    classNames: [
+      textBlockWidth,
+      "!bg-transparent",
+      classNames
+    ]
+  }))));
+});
 
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView21 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo4, useRef, useState } from "react";
 import { log as log7 } from "@dxos/log";
 import { getProviderValue, isNotFalsy as isNotFalsy4 } from "@dxos/util";
 var __dxlog_file11 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
@@ -5761,7 +5830,7 @@ var useTextEditor = (props = {}, deps = []) => {
       Escape: view?.state.facet(editorInputMode).noTabster
     }
   });
-  const handleKeyUp = useCallback3((event) => {
+  const handleKeyUp = useCallback2((event) => {
     const { key, target, currentTarget } = event;
     if (target === currentTarget) {
       switch (key) {
@@ -5820,7 +5889,7 @@ export {
   commentsState,
   convertTreeToJson,
   createBasicExtensions,
-  createComment2 as createComment,
+  createComment,
   createDataExtensions,
   createEditorAction,
   createEditorActionGroup,
@@ -5898,7 +5967,6 @@ export {
   toggleStyle,
   translations_default as translations,
   typewriter,
-  useActionHandler,
   useCommentClickListener,
   useCommentState,
   useComments,